<template>
  <div>
    <ScaleScreen class="scale-wrap" @handleResize="handleResize">
      <div class="bg">
        <top-header />
        <card />
        <el-row>
          <el-col :span="9">
            <dv-border-box-12 ref="a"><bar-chart ref="shipmentCartonsBar" /></dv-border-box-12>
            <dv-border-box-12 ref="b"><bar-chart ref="reviewCartonsBar" /></dv-border-box-12>
            <dv-border-box-12 ref="c"><bar-chart ref="palletScannedBar" /></dv-border-box-12>
          </el-col>
          <el-col :span="6">
            <dv-border-box-6 ref="d"><gauge-chart ref="cartonScanRate" /></dv-border-box-6>
            <dv-border-box-6 ref="e"><gauge-chart ref="shipmentCheckRate" /></dv-border-box-6>
            <dv-border-box-6 ref="f"><gauge-chart ref="palletScannedRate" /></dv-border-box-6>
          </el-col>
          <el-col :span="9">

            <dv-border-box-11 ref="g" title="欠品订单一览">
              <div class="div-style">
                <scroll-table />
              </div>
            </dv-border-box-11>

          </el-col>
        </el-row>
      </div>
    </ScaleScreen>
  </div>
</template>

<script>
import ScaleScreen from '@/components/ScaleScreen';
import TopHeader from './top-header'
import Card from './card.vue';
import BarChart from './bar-chart';
import GaugeChart from './gauge-chart.vue';
import ScrollTable from './scroll-table.vue';
export default {
  components: { ScaleScreen, TopHeader, Card, BarChart, GaugeChart, ScrollTable },
  data() {
    return {
      loading: true,
      rateOption: {
        'title': {
          'text': '外箱扫描进度(箱)'
        },
        'series': [
          {
            'type': 'gauge',
            'center': [
              '50%',
              '70%'
            ],
            'startAngle': 200,
            'endAngle': -20,
            'min': 0,
            'max': 100,
            'splitNumber': 10,
            'itemStyle': {
              'color': '#FFAB91'
            },
            'progress': {
              'show': true,
              'width': 30
            },
            'pointer': {
              'show': false
            },
            'axisLine': {
              'lineStyle': {
                'width': 30
              }
            },
            'axisTick': {
              'distance': -45,
              'splitNumber': 5,
              'lineStyle': {
                'width': 2,
                'color': '#999'
              }
            },
            'splitLine': {
              'distance': -52,
              'length': 14,
              'lineStyle': {
                'width': 3,
                'color': '#999'
              }
            },
            'axisLabel': {
              'distance': -5,
              'color': '#999',
              'fontSize': 15
            },
            'anchor': {
              'show': false
            },
            'title': {
              'show': false
            },
            'detail': {
              'valueAnimation': true,
              'width': '60%',
              'lineHeight': 40,
              'borderRadius': 8,
              'offsetCenter': [
                0,
                '-15%'
              ],
              'fontSize': 20,
              'fontWeight': 'bolder',
              'formatter': '752',
              'color': 'inherit'
            },
            'data': [
              {
                'value': 78.5
              }
            ]
          },
          {
            'type': 'gauge',
            'center': [
              '50%',
              '70%'
            ],
            'startAngle': 200,
            'endAngle': -20,
            'min': 0,
            'max': 100,
            'itemStyle': {
              'color': '#FD7347'
            },
            'progress': {
              'show': true,
              'width': 8
            },
            'pointer': {
              'show': false
            },
            'axisLine': {
              'show': false
            },
            'axisTick': {
              'show': false
            },
            'splitLine': {
              'show': false
            },
            'axisLabel': {
              'show': false
            },
            'detail': {
              'show': false
            },
            'data': [
              {
                'value': 78.5
              }
            ]
          }
        ]
      },
      barOption: {
        'title': {
          'text': '客户别-出荷数量'
        },
        'tooltip': {
          'trigger': 'axis',
          'axisPointer': {
            'type': 'shadow'
          }
        },
        'grid': {
          'left': '1%',
          'right': '1%',
          'bottom': '2%',
          'containLabel': true
        },
        'xAxis': [
          {
            'type': 'category',
            'data': [
              'OCB-CN-',
              'OMRON'
            ],
            'axisLabel': {
              'rotate': 0
            },
            'axisTick': {
              'alignWithLabel': true
            }
          }
        ],
        'yAxis': [
          {
            'type': 'value'
          }
        ],
        'series': [
          {
            'name': '数量',
            'type': 'bar',
            'color': '#00e9ff',
            'label': {
              'show': true,
              'position': 'top'
            },
            'barWidth': '30%',
            'data': [
              1407052,
              1093410
            ]
          }
        ]
      }
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.getCartonScanRate()
      this.getShipmentCheckRate()
      this.getPalletScannedRate()
      this.getShipmentCartonsBar()
      this.getReviewCartonsBar()
      this.getPalletScannedBar()
    })
    setInterval(() => {
      this.cancelLoading()
      this.getCartonScanRate()
      this.getShipmentCheckRate()
      this.getPalletScannedRate()
      this.getShipmentCartonsBar()
      this.getReviewCartonsBar()
      this.getPalletScannedBar()
    }, 10000)
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    handleResize() {
      setTimeout(() => {
        this.$refs.a.initWH()
        this.$refs.b.initWH()
        this.$refs.c.initWH()
        this.$refs.d.initWH()
        this.$refs.e.initWH()
        this.$refs.f.initWH()
        this.$refs.g.initWH()
        this.$refs.shipmentCartonsBar.chart.resize()
        this.$refs.reviewCartonsBar.chart.resize()
        this.$refs.palletScannedBar.chart.resize()
        this.$refs.cartonScanRate.chart.resize()
        this.$refs.shipmentCheckRate.chart.resize()
        this.$refs.palletScannedRate.chart.resize()
      }, 200)
    },
    getCartonScanRate() {
      this.$refs.cartonScanRate.chart.setOption(this.rateOption)
    },
    getShipmentCheckRate() {
      this.$refs.shipmentCheckRate.chart.setOption(this.rateOption)
    },
    getPalletScannedRate() {
      this.$refs.palletScannedRate.chart.setOption(this.rateOption)
    },
    async getShipmentCartonsBar() {
      await this.$refs.shipmentCartonsBar.chart.setOption(this.barOption)
    },
    async getReviewCartonsBar() {
      await this.$refs.reviewCartonsBar.chart.setOption(this.barOption)
    },
    async getPalletScannedBar() {
      await this.$refs.palletScannedBar.chart.setOption(this.barOption)
    },
    cancelLoading() {
      const timer = setTimeout(() => {
        this.loading = false;
        clearTimeout(timer);
      }, 500);
    }
  }
}
</script>

<style lang="less" scoped>
.scale-wrap {
    width: 100%;
    height: 100%;
    color: #fff;

    .bg {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background-image: url("./img/bg.png");
      box-shadow: 0 0 3px blue;
      background-size: 100% 100%;
      background-position: center center;
      flex-direction: column;
      justify-content: center; /* 水平居中 */
      align-items: stretch; /* 垂直拉伸 */
    }

    .dv-border-box-12 {
    position: relative;
    width: 100%;
    height: 25vh;
    padding-left: 20px;
    padding-top: 10px;
  }
  .dv-border-box-6 {
    position: relative;
    width: 100%;
    height: 25vh;
    padding-left: 20px;
    padding-top: 10px;
  }
  .dv-border-box-11 {
    position: relative;
    width: 100%;
    height: 75vh;
    padding-top: 60px;
    padding-bottom: 20px;
    padding-left: 25px
  }
  .div-style {
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
  }
}
</style>
